﻿@page
@{ Layout = "_Layout"; }
@section Styles{
  <style>
    html, body {
      margin: 0;
      height: 100%;
      overflow: hidden;
    }
    #preview {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
    }
    #editor {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
    }
    .toolbar {
      position: absolute;
      top: 15px;
      right: 145px;
      text-align: right;
      z-index: 10;
    }
    .nav {
      display: block;
      height: 38px;
      line-height: 38px;
      background-color: #f3f3f3;
    }
    .nav span {
      font-size: 10px;
      margin-right: 5px;
      color: rgb(80,80,80);
    }
    .button {
      font-size: 10px;
      text-decoration: none;
      position: relative;
      top: -2px;
      color: rgb(80,80,80);
      border: transparent;
      background-color: rgb(235,235,235);
      margin: 2px;
      padding: 8px 10px;
      cursor: pointer;
    }
    .button:hover, .active {
      color: rgb(235,235,235);
      background-color: rgb(80,80,80);
    }
    .button:focus {
      outline: none;
    }
    .button path {
      stroke: rgb(80,80,80);
    }
    .button:hover path {
      stroke: rgb(235,235,235);
    }
  </style>
}

<div v-if="isPreview" class="toolbar" style="right: 30px;">
  <button class="button active" v-on:click="btnCodeClick">代码编辑</button>
</div>
<div v-else class="nav">
  <div style="float: left; margin-left: 10px">
    <span>名称：<strong>{{ templateName }}</strong></span>
    <span>文件：<strong>{{ relatedFile }}</strong></span>
    <span>类型：<strong>{{ getTemplateType() }}</strong></span>
  </div>
  <div style="float: right; padding-right: 10px;">
    <el-tooltip class="item" effect="dark" placement="bottom">
      <div slot="content" style="text-align: center">保存模板<br/>Ctrl+S</div>
      <button class="button" v-on:click="btnSubmitClick(false)">保 存</button>
    </el-tooltip>
    
    <button class="button" v-on:click="btnPreviewClick">预 览</button>

    <el-tooltip class="item" effect="dark" placement="bottom">
      <div slot="content" style="text-align: center">生成页面<br/>Ctrl+B</div>
      <button v-if="templateId" class="button" v-on:click="btnCreateClick">生 成</button>
    </el-tooltip>

    <button class="button" v-on:click="btnFormatClick">格式化代码</button>
    <button v-if="templateId" class="button" v-on:click="btnRestoreClick">还原历史版本</button>
    <button class="button" v-on:click="btnDataSourceClick">预览数据源设置</button>
    <button class="button" v-on:click="btnSettingsClick">模板设置</button>
  </div>
</div>

<div id="preview" :style="{ height: winHeight + 'px', display: isPreview ? 'block' : 'none' }"></div>
<div id="editor" :style="{ height: (winHeight - 38) + 'px', display: isPreview ? 'none' : 'block', top: '38px' }"></div>

<el-drawer
  title="模板设置"
  :visible.sync="panelSettings"
  destroy-on-close
  direction="rtl"
  size="40%">
  <div class="drawer__content">
    <el-form v-on:submit.native.prevent size="small" ref="settings" :model="settings" label-width="150px">
      <el-form-item label="模板类型">
        {{ getTemplateType() }}
      </el-form-item>
      <el-form-item label="模板名称" prop="templateName" :rules="{
        required: true, message: '请输入模板名称'
      }">
        <el-input v-model="settings.templateName" placeholder="请输入模板名称"></el-input>
      </el-form-item>
      <el-form-item label="模板文件" prop="relatedFileName" :rules="[
        { required: true, message: '请输入模板文件' },
        { validator: validateRelatedFileName, trigger: 'blur' }
      ]">
        <el-input v-model="settings.relatedFileName" placeholder="请输入模板文件"></el-input>
        <div class="tips">路径以/分隔，文件名以T_开头</div>
      </el-form-item>
      <el-form-item label="生成文件名" v-if="isCreatedFileFullName()" prop="createdFileFullName" :rules="{
        required: true, message: '请输入生成文件名'
      }">
        <el-input v-model="settings.createdFileFullName" placeholder="请输入生成文件名"></el-input>
        <div class="tips" v-html="createdFileFullNameTips"></div>
      </el-form-item>
      <el-form-item label="文件扩展名">
        <el-select v-model="settings.createdFileExtName" placeholder="请选择文件扩展名">
          <el-option v-for="createdFileExtName in createdFileExtNames" :key="createdFileExtName" :label="createdFileExtName" :value="createdFileExtName"></el-option>
        </el-select>
      </el-form-item>

      <el-divider></el-divider>
      <div class="drawer__footer">
        <el-button type="primary" v-on:click="btnSettingsSubmitClick" size="small">确 定</el-button>
        <el-button size="small" v-on:click="btnSettingsCancelClick">取 消</el-button>
      </div>
    </el-form>
  </div>
</el-drawer>

<el-drawer
  title="预览数据源设置"
  :visible.sync="panelDataSource"
  destroy-on-close
  direction="rtl"
  size="40%">
  <div class="drawer__content">
    <el-form v-on:submit.native.prevent size="small" ref="dataSource" :model="dataSource" label-width="80px">
      <el-form-item label="栏目" prop="channelIds" :rules="{
        required: true, message: '请选择栏目'
      }">
        <el-cascader
          v-model="dataSource.channelIds"
          :multiple="false"
          v-on:change="handleDataSourceChannelChange"
          :options="channels"
          :props="{ checkStrictly: true }"
          placeholder="请选择栏目">
          <span slot-scope="{ node, data }">
            {{ node.label }} ({{ data.count }})
          </span>
        </el-cascader>
      </el-form-item>
      <el-form-item v-if="templateType === 'ContentTemplate'" label="内容" prop="contentId" :rules="{
        required: true, message: '请选择内容'
      }">
        <el-table
          :data="contents"
          style="width: 100%;"
          size="small"
          row-key="id"
          stripe>
          <el-table-column prop="id" label="选择" width="80">
            <template slot-scope="scope">
              <el-radio name="contentId" v-model="dataSource.contentId" :label="scope.row.key"></el-radio>
            </template>
          </el-table-column>
          <el-table-column
            label="内容标题"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-html="scope.row.value"></span>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-divider></el-divider>
      <div class="drawer__footer">
        <el-button type="primary" v-on:click="btnDataSourceSubmitClick" size="small">确 定</el-button>
        <el-button size="small" v-on:click="btnDataSourceCancelClick">取 消</el-button>
      </div>
    </el-form>
  </div>
</el-drawer>

@section Scripts{
  <script src="/sitefiles/assets/lib/monaco-editor/min/vs/loader.js"></script>
  <script src="/sitefiles/assets/js/admin/cms/templatesEditor.js" type="text/javascript"></script>
}
